<template>
    <li>
    <label>
        <!-- <input v-if="todo.done" type="checkbox" checked/>
        <input v-else type="checkbox"/> --> 
         <input  type="checkbox" :checked="todo.done" @change="checkIncident($event,todo.id)"/>
         <!-- 如下代码也能实现功能， 但是不太推荐，因为违反原则，props 只读，不允许修改。 -->
         <!-- <input  type="checkbox" v-model="todo.done"/> -->
        
        <span  v-show="!todo.editFlage">{{todo.title}}</span>
        <input 
            type="text" 
            @blur="handleBlur($event,todo)" 
            v-show="todo.editFlage" 
            :value="todo.title"
            ref="editBox"
        >
    </label>
    <button class="btn btn-danger" @click="delById(todo.id)">删除</button>
    <button v-show="!todo.editFlage" class="btn btn-edit"  @click="edit(todo)" >编辑</button>
    </li>
</template>

<script>

import pubsub from 'pubsub-js'
    export default {
        name:'UserItem',
        // 声明接收 todo 对象
        props:['todo'],
        methods:{
            // 勾选or取消勾选
            checkIncident(event,id){
                // this.revamp(id)
                // 触发总线 revamp 事件
                this.$bus.$emit('revamp',id)
            },
            // 删除
            delById(id){
               if(confirm('是否确认删除？')){
                //  this.del(id)
                // 触发总线实例的 del 事件
                // this.$bus.$emit('del',id)

                // 发布消息
                pubsub.publish('del',id)
               }
            },
            // 编辑
            edit(todo){
                if(todo.hasOwnProperty('editFlage')){
                    todo.editFlage = true 
                }else{
                    this.$set(todo,'editFlage',true)
                }
                // 能实现，不推荐
                /* setTimeout(() => {
                   this.$refs.editBox.focus();
                }); */
                // 等待下一次DOM更新结束后调用其回调函数
                this.$nextTick(()=>{
                    this.$refs.editBox.focus(); 
                })
            },
            // 失去焦点
            handleBlur(e,todo){
                todo.editFlage = false ;
                if(!e.target.value.trim()){
                    alert('输入不能为空') 
                    return 
                }
                this.$bus.$emit('updateTodo',todo.id,e.target.value)
            }
        },
        // 自定义指令
        directives:{

        },  
        // 销毁前
        beforeDestroy(){
            this.todo.editFlage = false;
        }
        
    }
</script>

<style scoped>
    /*item*/
    li {
    list-style: none;
    height: 36px;
    line-height: 36px;
    padding: 0 5px;
    border-bottom: 1px solid #ddd;
    }

    li label {
    float: left;
    cursor: pointer;
    }

    li label li input {
    vertical-align: middle;
    margin-right: 6px;
    position: relative;
    top: -1px;
    }

    li button {
    float: right;
    display: none;
    margin-top: 3px;
    }

    li:before {
    content: initial;
    }

    li:last-child {
    border-bottom: none;
    }

    li:hover{
        background-color: #ddd;
    }

    li:hover button{
        display: block;
    }

</style>